<template>
  <div id="left2" style="width: 100%; height: 100%"></div>
</template>

<script>
//引入所需要的图表
import { Pie } from "@antv/g2plot";
//引入get请求
import { get } from "@/utils/request";
export default {
  data() {
    return {
      //图表的数据源
      pieData:[]
    }
  },
   async mounted() {
    //自动获取数据
    await this.getDevData()
    await this.initLeft2()
  },
  methods: {
    //创建对应的图表
    initLeft2() {
      const piePlot = new Pie("left2", {
        appendPadding: 10,
        data:this.pieData,
        angleField: "value",
        colorField: "type",
        radius: 0.9,
        label: {
          type: "inner",
          offset: "-30%",
          content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
          style: {
            fontSize: 14,
            textAlign: "center",
          },
        },
        interactions: [{ type: "element-active" }],
      });

      piePlot.render();
    },
    //获取设备状态的数据
    async getDevData(){
      let res = await get('/dashboard/queryDeviceOnlineNumber')
      // console.log(res);
      this.pieData = res.data
      // this.initLeft2()
    }
  },
};
</script>

<style scoped>
</style>